<template>
	<div style="text-align:center;width:100%;margin:0 auto;height:93px;padding-top:18px;background:#979fa7">
		<div style="float:left"><img :src="logo"></div>
		<div>
			<h1>
				<font>联合重卡数字化项目目视跟进表</font>
			</h1>
		</div>
	</div>
	<div class="role-container">

		<div class="role-tree-right flex-col">
			<div class="title">
				<div><i class="el-icon-folder-opened"></i>项目表</div>

			</div>
			<el-scrollbar class="el-role-list">
				<div style="text-align:center;width:100%;margin:0 auto;height:60px;padding-top:18px;">
					<!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
						<el-form-item label="进度">
							<el-input v-model="formInline.title"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">查询</el-button>
						</el-form-item>
					</el-form> -->
					<vol-form ref="form"
					            :labelWidth="80"
					            :load-key="true"
					            :formFields="fields"
					            :formRules="formOptions">
					</vol-form>
				</div>
				<vol-table :textInline="false" :ck="false" ref="tableList" @rowClick="rowClick" :loadKey="true" :columns="columns"
									:pagination-hide="false" :height="900" :defaultLoadPage="true" @loadBefore="loadBefore"
									@loadAfter="loadTableAfter" :endEditAfter="endEditAfter" url="/api/cc_task/getPageData"
									:row-index="true" :index="true" click-edit="false"></vol-table>

				<!-- <look_downfile ref="look_downfile"></look_downfile> -->
				<!-- <el-row :gutter="20" v-for="(x,i) in Math.ceil(fl_types.length/lcout)" :key="x" justify="center">
					<el-col :span="8" v-for="(y,j) in lcout" :key="y">
						<el-card class="box-card" v-if="fl_types[i*lcout+j]!=null">
							<div class="grid-content bg-purple">
								#{{i*lcout+j}}.{{fl_types[i*lcout+j].text}}
							</div>
							<div style="height:120px;overflow-y:auto;">
								<table border="0" cellspacing="0" cellpadding="0">
									<tr v-for="(row, index) in list" :key="index">
										<td @click=open_info(row.q) v-if="fl_types[i*lcout+j].text===row.sortName">
											<el-link type="warning">.{{ row.q.title }}.</el-link></td>
									</tr>
								</table>
							</div>
						</el-card>
					</el-col>
				</el-row> -->
			</el-scrollbar>
		</div>
	</div>


</template>
<script>
	import VolForm from "@/components/basic/VolForm.vue";
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import http from "@/../src/api/http.js";
	var imgUrl = require("@/assets/imgs/comlog.png");
	import VolHeader from "@/components/basic/VolHeader.vue";
	import VolTable from "@/components/basic/VolTable.vue";
	import look_downfile from "@/views/JRdownfile/look_downfile.vue"
	export default {
		components: {
			VolHeader,
			VolTable,
			look_downfile,
			http,
			VolForm 
		},
		data() {
			return {
				fields: {"progress":""}, 
			    formOptions: [[{"dataKey":"progress_step","data":[],"title":"进度(%)","field":"progress","type":"select",
				"colSize":2,onChange:(val)=>{
					//console.log(val+"===");
					this.onSubmit(val)
				}}]],
			    
				tree: null,
				lcout: 3, //每行显示的数量
				formInline: {
					title: "",
				},
				columns: [{field:'cc_task_id',title:'集瑞任务管理表',type:'guid',width:110,hidden:true,readonly:true,require:true,align:'left'},
                       {field:'xuh',title:'任务序号',type:'string',width:100,align:'left',sort:true},
                       {field:'rec_datetime',title:'受理时间',type:'date',width:150,require:true,align:'left'},
                       {field:'tc_departname',title:'需求提出部门',type:'string',bind:{ key:'oa_depname',data:[]},width:220,require:true,align:'left'},
                       {field:'q_decribe',title:'问题描述',type:'string',width:220,align:'left'},
                       {field:'a_decribe',title:'进度描述',type:'string',width:220,align:'left'},
                       {field:'tc_ren',title:'需求提出人',type:'string',width:220,require:true,align:'left'},
                       {field:'zeren',title:'需求责任人',type:'string',width:220,require:true,align:'left'},
                       {field:'progress',title:'进度(%)',type:'int',bind:{ key:'progress_step',data:[]},width:220,require:true,align:'left'},
                       {field:'plan_datetime',title:'计划完成时间',type:'date',width:150,align:'left'},
                       {field:'solution',title:'解决方案(文档连接)',type:'string',width:220,align:'left'},
                       {field:'sj_datetime',title:'实际完成时间',type:'date',width:150,align:'left'},
                       {field:'CreateDate',title:'创建时间',type:'date',width:150,hidden:true,align:'left'},
                       {field:'Creator',title:'创建人',type:'string',width:130,hidden:true,align:'left'}],
				logo: ref(imgUrl),
				fl_types: [{
						ok3w_article_id: 1,
						text: 'aaa1'
					},

				],
				all_list: [],
				list: [{
						title: '框架2.x版本不支持直接升级Vue3版本(代码生成器已修改)'
					},

					//(框架内部组件vue2/3语法都在使用),你也可以使用vue3语法
				],

			};
		},
		setup() {
			let open = (item) => {
				window.open(item.url, '_blank');
			};
			let interval;
			onMounted(() => {

			});
			onUnmounted(() => {
				interval && clearInterval(interval);

			});
			return {
				open
			};
		},
		mounted() {
			//console.log(Math.ceil(this.fl_types_1.length/3));
			let qid = "";
			var turl = "/api/cc_task/getPageData";
			http.post(turl, {}, true).then((s) => {
				/* this.fl_types = s.online_class_list;
				this.list = s.alltable;
				this.alllist = s.alltable; */
				this.columns.forEach(x=>{
					if(x.field == "q_decribe"){
					   x.formatter = (row)=>{
					     return row["q_decribe"];//直接过滤html标识
					   }
					}
				});
				this.columns.forEach(x=>{
					if(x.field == "a_decribe"){
					   x.formatter = (row)=>{
					     return row["a_decribe"];//直接过滤html标识
					   }
					}
				});
				this.columns.unshift({
				  title: "进度",
				  field: "进度",
				  width: 250,
				  align: "center",
				  render: (h, { row, column, index }) => {
							 if (row.progress==100){
								return <div> <el-progress text-inside="false" status="success" stroke-width="26" percentage={row.progress}></el-progress>
								      </div>
							 }
							 else
							 {
								 return <div> <el-progress text-inside="false" status="exception" stroke-width="26" percentage={row.progress}></el-progress>
								       </div>
							 }
				  }
				})
			});


		},
		methods: {
			rowClick({
				row,
				column,
				event
			}) {
				//this.open_info(row);
			},
			onSubmit(val) {

				let params = {
					page: 1, //分页页数(可不填)
					rows: 30, //分页大小(可不填)
					sort: "", //可不填
					order: "", //可不填
					wheres: [{
						name: "progress",
						value: val,
						displayType: "select"
					}, ],
				};
				// params.value="out";//说明从系统外登录
				this.$refs.tableList.load(params, true); //查询审核页的业务数据
			},

		},
		destroyed() {}
	};
</script>
<style>
	.el-row {
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 30px;
	}

	.row-bg {
		padding: 5px 0;
		background-color: #f9fafc;
	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both;
	}

	.box-card {
		width: 350px;
	}
</style>
<style lang="less" scoped>
	.role-container {
		position: absolute;
		background: #f6f6f6;
		height: 100%;
		width: 100%;
		padding: 10px;
		display: flex;

		.flex-col {
			display: flex;
			flex-direction: column;
		}

		.role-tree-left {
			border: 1px solid #f2f2f2;
			background: #fff;
			width: 230px;
			margin-right: 10px;

			.title {
				i {
					margin-left: 10px;
				}
			}
		}

		.role-tree-right {
			background: #fff;
			border: 1px solid #f2f2f2;
			width: 0;
			flex: 1;

			.title {
				display: flex;

				i {
					margin-left: 10px;
				}

				div {
					flex: 1;
				}
			}

			.action-group {
				display: flex;
				// line-height: 32px;
				justify-content: center;
				align-items: center;

				label {
					float: left;
				}

				.action-text {
					line-height: 33px;

					label {
						margin-right: 5px;
					}
				}
			}
		}

		.title {
			padding: 10px;
			background: rgb(246 250 255);
			font-weight: bold;
			font-size: 14px;
			letter-spacing: 2px;
		}

		.el-role-list {
			flex: 1;
			height: 0;
			overflow-x: hidden;
		}
	}

	.role-tree-left ::v-deep(.el-tree-node__content) {
		cursor: pointer;
		height: auto;
		padding: 5px;
		margin: 2px 10px;
		font-size: 15px;
	}

	.role-tree-left ::v-deep(.el-tree-node__content:hover) {
		background: #f4f4f4;
		border-radius: 20px;
	}

	.role-tree-left ::v-deep(.is-current > .el-tree-node__content:first-child) {
		background: #f2f2f2;
		border-radius: 20px;
	}

	.role-tree-right ::v-deep(.el-tree-node__content) {
		margin-bottom: 5px;
		height: auto;
	}

	.role-tree-right ::v-deep(.el-checkbox__label) {
		position: relative;
		top: 2px;
	}
</style>